window.onload = function () {
    //配置
    var config = {
        vx: 4,//点x轴速度,正为右，负为左
        vy: 4,//点y轴速度
        height: 2,//点高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,//点个数
        color: "0, 0, 0",//点颜色
        stroke: "0,0,0",//线条颜色
        dist: 6000,//点吸附距离
        e_dist: 200000,//鼠标吸附加速距离
        max_conn: 10//点到点最大连接数
    }
    //调用 
    CanvasParticle(config);
}

let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]
// 获取
let p = document.querySelector(".p6")
let li = document.querySelector(".ul")
let liss = document.querySelectorAll(".ul .if")
let a = document.querySelectorAll(".ul li .ifs")
let bb = document.querySelector(".ul .bb")
// console.log(bb)
// console.log(a);
// console.log(liss);
//    遍历
let ss = "";
// li.forEach(function( v ){
//     console.log(v);
// let n = 1;
li.addEventListener("click", function (e) {

    // ss+=`<p class="p6"><span>${ v.price}</span>(约<span>${v.unitPrice}</span>元/次),仅限企业实名购买</p>`
    // console.log(e.target.innerText) url=url.substr(1,url.length-1);
    let text = e.target.innerText
    let count = text.substr(0, text.length - 1)

    data.forEach(e => {
        if (e.count == count) {
            ss = `<p class="p6"><span>￥${e.price}</span>(约<span>${e.unitPrice}</span>元/次),仅限企业实名购买</p>`
            p.innerHTML = ss

        }
    })

})
// 遍历ul 底下的除过第一个其他三个li
liss.forEach(function (v) {
    // 添加点击事件
    v.addEventListener("click", function () {
        // 再遍历一次，底下的除过第一个其他三个li
        liss.forEach(function (v1) {
            // 先将其全部恢复默认样式
            v1.className = "";
        })
        // 点击哪一个让给添加一个class样式
        this.className = "bg"
    })
})

// 效果同上 这个是改变里面a标签的样式，上面是改变li的样式
a.forEach(function (v, i) {
    v.addEventListener("click", function () {
        a.forEach(function (v2) {
            v2.className = "";
        })
        // if(i== 0){
        //     v[i].className = "aa"
        // }
        this.className = "a"
    })
})

// 横幅底下内容
let span = document.querySelectorAll(".content-header span")
console.log(span);
let encapsulation = document.querySelectorAll(".encapsulation")
console.log(encapsulation);

// 遍历span
span.forEach(function (v, i) {
    v.addEventListener("click", function () {
        span.forEach(function (v1) {
            v1.className = ""
        })
        this.className = "on"
        encapsulation.forEach(function (v2) {
            v2.className = "encapsulation"
        })
        encapsulation[i].className = "active"
    })

})




